<template>
  <div class="securit-view p-16px">
    <p class="text-text-3 mt-0">
      <svg class="h-10px w-10px fill-text-6 rotate-180" @click="$router.go(-1)">
        <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Arrow"></use>
      </svg>
      <span class="text-text-3 text-15px px-8px font-800">
        {{ $t("security") }}
      </span>
    </p>
    <div class="account-info__item bg-fog-18 p-12px rounded-8px">
      <p
        class="item-title text-14px text-text-3 m-0 pb-12px bc-border-bottom font-700"
      >
        {{ $t("setup") }}
      </p>
      <div class="item-content pt-12px">
        <div class="text-12px text-text-3">{{ $t("change") }}</div>
        <van-button
          class="bc-btn mt-6px"
          block
          @click="$router.push('/change-password')"
        >
          <svg class="fill-text-3 h-12px w-12px">
            <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Edit"></use>
          </svg>
          {{ $t("btn_text") }}
        </van-button>
        <div class="text-12px text-text-3 mt-10px">
          {{ $t("two") }}
        </div>
        <div class="text-text-4 text-12px mt-4px">
          {{ $t("desc") }}
        </div>
        <van-button
          class="bc-btn mt-6px"
          block
          @click="$router.push('/phone-validate')"
        >
          {{ $t("btn_text_2") }}
        </van-button>
      </div>
    </div>
    <div class="account-info__item bg-fog-18 p-12px rounded-8px mt-12px">
      <p class="item-title text-14px text-text-3 m-0 pb-12px  font-700">
        {{ $t("sessions") }}
      </p>
      <div class="flex justify-between bg-fog-45 px-6px py-8px">
        <span class="text-10px text-text-3"> {{ $t("device") }}</span>
        <span class="text-10px text-text-3">{{ $t("action") }}</span>
      </div>
      <div>
        <div class="flex justify-between items-center p-10px bc-border-bottom">
          <div>
            <div>
              <img
                class="h-12px"
                src=""
              />
              <span class="text-12px text-text-3">
                Mac OS X (iPhone) (Mobile Safari)
              </span>
            </div>
            <div class="text-10px text-text-16">
              JP | 103.151.173.97
            </div>
            <div class="text-10px text-text-16">
              Online
            </div>
          </div>
          <div class="text-12px text-text-16">
            In Use
          </div>
        </div>
        <div class="flex justify-between items-center p-10px bc-border-bottom">
          <div>
            <div>
              <img
                class="h-12px"
                src=""
              />
              <span class="text-12px text-text-3">
                Mac OS X (iPhone) (Mobile Safari)
              </span>
            </div>
            <div class="text-10px text-text-16 mt-4px">
              JP | 103.151.173.97
            </div>
            <div class="text-10px text-text-16 mt-4px">
              {{ $t("online") }}
            </div>
          </div>
          <div class="text-12px text-text-16" v-if="false">
            {{ $t("in_use") }}
          </div>
          <div class="text-12px text-text-17" v-if="true">
            {{ $t("remove") }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const $t = key => {
  return t("security." + key);
};
</script>

<style></style>
